<template>
	<view class="view">
		<view class="head">
			<view class="logo">
				<image src="/static/images/ic_logo.png"></image>
				<view class="tip">{{ tip }}</view>
			</view>
			<view class="operate">
				<!-- #ifdef APP-PLUS -->
				<button @click="wechatAppLogin()">微信一键登录</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button @click="wechatMiniLogin()">手机号快捷登录</button>
				<button class="cancel-btn" @click="cancelLogin()">取消</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="foot">
			<!-- #ifdef APP-PLUS -->
			<p class="title">——————其他登录方式——————</p>
			<view class="Box">
				<view @click="to('/pages/LoginPages/phoneLogin/main')">
					<image src="/static/images/ic_phone.png"></image>
					<p>手机号</p>
				</view>
			</view>
			<!-- #endif -->
			<view class="argument">
				<u-checkbox-group v-model="agreement" size="14">
					<u-checkbox name="1">
					</u-checkbox>
				</u-checkbox-group>
				<span>阅读并同意</span>
				<span class="text" @click="to('/pages/other/article/article?type=6')">《服务协议》</span>
				<span class="text" @click="to('/pages/other/article/article?type=4')">《隐私政策》</span>
			</view>
		</view>
		<!-- 完善个人资料弹窗 -->
		<improve-user-info ref="improveUserInfo" @close="userInfo()"></improve-user-info>
	</view>
</template>
<script>
	import ImproveUserInfo from '@/components/improve-user-info/improve-user-info.vue';
	import {
		miniLoginByParam,
		getUserInfo
	} from '@/apis/request.js';

	export default {
		components: {
			ImproveUserInfo
		},
		onLoad(options) {
			if (options.inviteCode) {
				uni.setStorageSync('inviteCode', options.inviteCode);
			}
			if (options.q) {
				const url = decodeURIComponent(options.q);
				const inviteCode = this.getUrlParam(url, 'inviteCode');
				if (inviteCode) {
					uni.setStorageSync('inviteCode', inviteCode);
				}
			}
			//已经登录的获取用户信息，进入下一步
			if (uni.getStorageSync('token')) {
				this.userInfo();
			}
		},
		data() {
			return {
				tip: this.$shareContent || '微米陪诊',
				agreement: []
			};
		},
		methods: {
			cancelLogin: function() {
				wx.reLaunch({url:'/pages/index/main'})
			},
			getUrlParam: function(path, name) {
				var reg = new RegExp('(^|\\?|&)' + name + '=([^&]*)(\\s|&|$)', 'i');
				if (reg.test(path)) return unescape(RegExp.$2.replace(/\+/g, ' '));
				return '';
			},
			/**
			 * 界面跳转
			 * @param {Object} url 要跳转的界面路径【最好使用全路径即/pages开头】
			 */
			to(url) {
				uni.navigateTo({
					url
				});
			},
			/**
			 * APP微信登录
			 */
			wechatAppLogin() {
				if(!this.agreement[0]) {
					this.$Toast('请阅读并同意服务协议及隐私政策')
					return false
				}
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log('APP微信授权', res);
						const unionid = res.authResult.unionid;
						const openid = res.authResult.openid;
						this.$api.http(
							'/login/api/n/weChatLogin',
							'GET', {
								unionId: unionid
							},
							res => {
								const result = res.data.result;
								if (res.data.code == 2099) {
									this.goBindPhone(openid, unionid, 1);
								} else if (res.data.code == 200) {
									this.loginSuccess(result);
								} else {
									this.$Toast(res.data.message || '登录失败，请重试！');
								}
							},
							err => {
								if (err.data.code == 2099) {
									this.goBindPhone(openid, unionid, 1);
								} else {
									this.$Toast(err.data.message || '登录失败，请重试！');
								}
							}
						);
					},
					fail: err => {
						this.$Toast('登录失败，请重试！');
					}
				});
			},
			/**
			 * 微信小程序登录
			 */
			wechatMiniLogin() {
				if(!this.agreement[0]) {
					this.$Toast('请阅读并同意服务协议及隐私政策')
					return false
				}
				uni.login({
					provider: 'weixin',
					success: (res) => {
						miniLoginByParam({
							code: res.code
						}).then(result => {
							//登录成功处理
							this.loginSuccess(result);
						}).catch(err => {
							console.log(err);
							//未注册跳转到注册页【即绑定手机号界面】
							if (err.data.code == 2099) {
								const ids = err.data.message.split(',');
								this.goBindPhone(ids[1], ids[0], 2);
							}
						});
					}
				});
			},
			/**
			 * 登录成功操作
			 * @param {Object} result
			 */
			loginSuccess(result) {
				const {
					token,
					user
				} = result;
				uni.setStorageSync('token', token);
				uni.setStorageSync('userInfo', user);
				if (user.registeredStatus == 1) {
					uni.switchTab({
						url: '/pages/index/main'
					});
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: '/pages/LoginPages/perfectInfo/main'
					});
					// #endif
					//弹窗进行完善资料处理【旧需求和APP一致是跳转完善个人资料界面】
					// #ifndef APP-PLUS
					this.$refs.improveUserInfo.open();
					// #endif
				}
			},
			/**
			 * 跳转绑定手机号
			 * @param {Object} openId
			 * @param {Object} unionId
			 * @param {Object} type
			 */
			goBindPhone(openId, unionId, type) {
				uni.reLaunch({
					url: `/pages/LoginPages/phoneLogin/main?unionId=${unionId}&openId=${openId}&type=${type}`
				});
			},
			/**
			 * 获取更新后的用户信息并更新
			 */
			userInfo() {
				getUserInfo({}).then(res => {
					uni.setStorage({
						key: 'userInfo',
						data: res,
						success() {
							uni.reLaunch({
								url: '/pages/index/main'
							});
						}
					});
				}).catch(err => {
					this.$Toast(err.message || '请求失败，请重试！');
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.view {
		height: 100vh;
		box-sizing: border-box;
		background: #ffffff;
		align-items: center;
		padding: 30rpx;

		.head {
			text-align: center;

			.logo {
				margin-top: 90rpx;

				image {
					width: 138rpx;
					height: 138rpx;
				}

				.tip {
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #a4a6bc;
				}
			}

			.operate {
				margin-top: 150rpx;

				button {
					width: 450rpx;
					height: 74rpx;
					color: #ffffff;
					text-align: center;
					line-height: 74rpx;
					border-radius: 50rpx;
					font-size: 31rpx;
					background-color: #32C59A;
				}
				
				.cancel-btn {
					background-color: #fff;
					color: #323232;
					margin-top: 60rpx;
					border: 1rpx solid #ccc;
				}
			}
		}

		.foot {
			margin-top: 50rpx;
			text-align: center;

			.title {
				font-size: 22rpx;
				color: #999999;
				margin-bottom: 50rpx;
			}

			.Box {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 58rpx;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 20rpx;
					}

					p {
						font-size: 22rpx;
						color: #999999;
					}
				}
			}

			.argument {
				position: fixed;
				bottom: 100rpx;
				left: 0;
				right: 0;
				display: flex;
				
				align-items: center;
				justify-content: center;
				span {
					color: #6e7a94;
					font-size: 28rpx;
				}

				span:nth-child(1) {
					color: #999999;
				}
				
				.text {
					color: #e89b40;
				}
			}
		}
	}
</style>